{% extends "site_base.html" %}

{% block body %}
		<style type="text/css">
		    .column { width: 170px; float: left; padding-bottom: 100px; }
		    .portlet { margin: 0 1em 1em 0; }
		    .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
		    .portlet-header .ui-icon { float: right; }
		    .portlet-content { padding: 0.4em; }
		    .ui-sortable-placeholder { border: 1px dashed black; visibility: visible !important; height: 150px !important; }
		    .ui-sortable-placeholder * { visibility: hidden; }
		</style>

		<div id="page-container">
                    <div id="page-container-1" class="column">
                        <!-- Lewa kolumna START -->

                            <div class="box-shadow" class="portlet">
                                <div class="box">
                                    <div class="box-header" class="portlet-header">
                                        <span class="box-header-title">
                                            <img class="box-header-pointer" alt="pointer" src="{{ MEDIA_URL }}css/gfx/icons/point-transparent.png" />
                                            <span>Nieczytane wiadomości</span>
                                        </span>
                                        <span class="box-header-icons">
                                            <img class="ui-icon ui-icon-plusthick box-header-minimize" alt="minimize" src="{{ MEDIA_URL }}css/gfx/icons/minimize-transparent.png" />
                                            <img class="box-header-close" alt="close" src="{{ MEDIA_URL }}css/gfx/icons/close-transparent.png" />
                                        </span>
                                    </div>
                                    <div class="box-content portlet-content">
                                        <p class="line">
                                            <span class="button-border"><span class="date">18/08/2009</span></span>
                                            <span class="content">
                                                <strong>Temat:</strong> Bez tematu<br />
                                                <span class="color-gray"><strong>Od:</strong> Zenek Nowak</span>
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-white.gif" />
                                                <img class="icon-delete" alt="delete" src="{{ MEDIA_URL }}css/gfx/icons/delete-white.gif" />
                                            </span>
                                        </p>
                                        <hr />
                                        <p class="line">
                                            <span class="button-border"><span class="date">18/08/2009</span></span>
                                            <span class="content">
                                                <strong>Temat:</strong> Jak postępu?<br />
                                                <span class="color-gray"><strong>Od:</strong> Ernest Kowalski</span>
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-white.gif" />
                                                <img class="icon-delete" alt="delete" src="{{ MEDIA_URL }}css/gfx/icons/delete-white.gif" />
                                            </span>
                                        </p>
                                        <hr />
                                        <p class="line">
                                            <span class="button-border"><span class="date">17/08/2009</span></span>
                                            <span class="content">
                                                <strong>Temat:</strong> Materiały<br />
                                                <span class="color-gray"><strong>Od:</strong> Ernest Kowalski</span>
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-white.gif" />
                                                <img class="icon-delete" alt="delete" src="{{ MEDIA_URL }}css/gfx/icons/delete-white.gif" />
                                            </span>
                                        </p>
                                        <hr />
                                        <p class="line marked">
                                            <span class="button-border"><span class="date alert">11/08/2009</span></span>
                                            <span class="content">
                                                <strong>Temat:</strong> Piwo jutro?<br />
                                                <span class="color-gray"><strong>Od:</strong> System</span>
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-pink.gif" />
                                                <img class="icon-delete" alt="delete" src="{{ MEDIA_URL }}css/gfx/icons/delete-pink.gif" />
                                            </span>
                                        </p>
                                        
                                    </div>
                                    <p class="size-icon"><img class="icon-size" alt="change-size" src="{{ MEDIA_URL }}css/gfx/icons/size-white.gif" /></p>
                                </div>
                            </div>


                        {% load blogs_tags %}
                        {% widget_blog %}                                    


                            <div class="box-shadow">
                                <div class="box">
                                    <div class="box-header">
                                        <span class="box-header-title">
                                            <img class="box-header-pointer" alt="pointer" src="{{ MEDIA_URL }}css/gfx/icons/point-transparent.png" />
                                            <span>Moje RSS</span>
                                        </span>
                                        <span class="box-header-icons">
                                            <img class="box-header-minimize" alt="minimize" src="{{ MEDIA_URL }}css/gfx/icons/minimize-transparent.png" />
                                            <img class="box-header-close" alt="close" src="{{ MEDIA_URL }}css/gfx/icons/close-transparent.png" />
                                        </span>
                                    </div>
                                    <div class="box-content">
                                        <p class="line">
                                            <span class="icon-rss"><img alt="rss" src="{{ MEDIA_URL }}css/gfx/icons/rss-white.gif" /></span>
                                            <span class="content">
                                                Kolejna operacja plastyczna Ibisza!<br />
                                                <span class="color-gray">Pudelek.pl</span>
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-white.gif" />
                                                <img class="icon-delete" alt="delete" src="{{ MEDIA_URL }}css/gfx/icons/delete-white.gif" />
                                            </span>
                                        </p>
                                        <hr />
                                        <p class="line">
                                            <span class="icon-rss"><img alt="rss" src="{{ MEDIA_URL }}css/gfx/icons/rss-white.gif" /></span>
                                            <span class="content">
                                                Tydzień fotografii w Krakowie<br />
                                                <span class="color-gray">digart.pl</span>
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-white.gif" />
                                                <img class="icon-delete" alt="delete" src="{{ MEDIA_URL }}css/gfx/icons/delete-white.gif" />
                                            </span>
                                        </p>
                                        <hr />
                                        <p class="line">
                                            <span class="icon-rss"><img alt="rss" src="{{ MEDIA_URL }}css/gfx/icons/rss-white.gif" /></span>
                                            <span class="content">
                                                Parodia goni parodię...<br />
                                                <span class="color-gray">tvn24.pl</span>
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-white.gif" />
                                                <img class="icon-delete" alt="delete" src="{{ MEDIA_URL }}css/gfx/icons/delete-white.gif" />
                                            </span>
                                        </p>
                                        <p class="buttons">
                                            <span class="button-border"><span class="button">dodaj RSS</span></span>
                                        </p>
                                    </div>
                                    <p class="size-icon"><img class="icon-size" alt="change-size" src="{{ MEDIA_URL }}css/gfx/icons/size-white.gif" /></p>
                                </div>
                            </div>

                        <!-- Lewa kolumna KONIEC -->
                    </div>
                    <div id="page-container-2"  class="column">
                        <!-- Środkowa kolumna START -->

                            <div class="box-shadow">
                                <div class="box">
                                    <div class="box-header">
                                        <span class="box-header-title">
                                            <img class="box-header-pointer" alt="pointer" src="{{ MEDIA_URL }}css/gfx/icons/point-transparent.png" />
                                            <span>Sobota, 29 Sierpnia 2009</span>
                                        </span>
                                        <span class="box-header-icons">
                                            <img class="box-header-minimize" alt="minimize" src="{{ MEDIA_URL }}css/gfx/icons/minimize-transparent.png" />
                                            <img class="box-header-close" alt="close" src="{{ MEDIA_URL }}css/gfx/icons/close-transparent.png" />
                                        </span>
                                    </div>
                                    <div class="box-content">
                                        <p class="line">
                                            <span class="content header">Najbliższe wydarzenia</span>
                                            <span class="clock right"><span class="time">18:20</span></span>
                                        </p>
                                        <p class="half-line">
                                            <span class="content">
                                                <span class="color-orange">-</span> Powiesić pranie <span class="color-orange">» za 1 minutę</span>
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-white.gif" />
                                            </span>
                                        </p>
                                        <hr />
                                        <p class="half-line">
                                            <span class="content">
                                                <span class="color-orange">-</span> Zadzwonić do Zbyszka <span class="color-orange">»</span> <span class="color-gray">za 21 minut</span>
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-white.gif" />
                                            </span>
                                        </p>
                                        <hr />
                                        <p class="half-line">
                                            <span class="content">
                                                <span class="color-orange">-</span> Wyjście na piwo <span class="color-orange">»</span> <span class="color-gray">za 1 godzinę 52 minut</span>
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-white.gif" />
                                            </span>
                                        </p>
                                        <hr />
                                        <p class="half-line">
                                            <span class="content">
                                                <span class="color-orange">-</span> Projekt <span class="color-orange">»</span> <span class="color-gray">za 1 dzień 12 godzin</span>
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-white.gif" />
                                            </span>
                                        </p>
                                        <hr />
                                        <p class="half-line">
                                            <span class="content">
                                                <span class="color-orange">-</span> Zebranie <span class="color-orange">»</span> <span class="color-gray">za 3 dni</span>
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-white.gif" />
                                            </span>
                                        </p>
                                    </div>
                                    <p class="size-icon"><img class="icon-size" alt="change-size" src="{{ MEDIA_URL }}css/gfx/icons/size-white.gif" /></p>
                                </div>
                            </div>


                           <div class="box-shadow">
                                <div class="box">
                                    <div class="box-header">
                                        <span class="box-header-title">
                                            <img class="box-header-pointer" alt="pointer" src="{{ MEDIA_URL }}css/gfx/icons/point-transparent.png" />
                                            <span>Na forum</span>
                                        </span>
                                        <span class="box-header-icons">
                                            <img class="box-header-minimize" alt="minimize" src="{{ MEDIA_URL }}css/gfx/icons/minimize-transparent.png" />
                                            <img class="box-header-close" alt="close" src="{{ MEDIA_URL }}css/gfx/icons/close-transparent.png" />
                                        </span>
                                    </div>
                                    <div class="box-content">
                                        <p class="line">
                                            <span class="button-border"><span class="date">dzisiaj</span></span>
                                            <span class="content">
                                                Sekcja grafiki <span class="color-orange">»</span> Projekty<br />
                                                <span class="color-gray">Ernest Kowalski</span>
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-white.gif" />
                                            </span>
                                        </p>
                                        <hr />
                                        <p class="line">
                                            <span class="button-border"><span class="date">dzisiaj</span></span>
                                            <span class="content">
                                                Off-topic <span class="color-orange">»</span> Piwo?<br />
                                                <span class="color-gray">Ernest Kowalski</span>
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-white.gif" />
                                            </span>
                                        </p>
                                        <hr />
                                        <p class="line">
                                            <span class="button-border"><span class="date">wczoraj</span></span>
                                            <span class="content">
                                                Sekcja PR <span class="color-orange">»</span> Dyskusja<br />
                                                <span class="color-gray">Jan Nowacki</span>
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-white.gif" />
                                            </span>
                                        </p>
                                        <hr />
                                        <p class="line">
                                            <span class="button-border"><span class="date">2 dni temu</span></span>
                                            <span class="content">
                                                Ogłoszenia <span class="color-orange">»</span> Zebranie<br />
                                                <span class="color-gray">Ernest Kowalski</span>
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-white.gif" />
                                            </span>
                                        </p>

                                    </div>
                                    <p class="size-icon"><img class="icon-size" alt="change-size" src="{{ MEDIA_URL }}css/gfx/icons/size-white.gif" /></p>
                                </div>
                            </div>


                           <div class="box-shadow">
                                <div class="box">
                                    <div class="box-header">
                                        <span class="box-header-title">
                                            <img class="box-header-pointer" alt="pointer" src="{{ MEDIA_URL }}css/gfx/icons/point-transparent.png" />
                                            <span>Najnowsze dokumenty</span>
                                        </span>
                                        <span class="box-header-icons">
                                            <img class="box-header-minimize" alt="minimize" src="{{ MEDIA_URL }}css/gfx/icons/minimize-transparent.png" />
                                            <img class="box-header-close" alt="close" src="{{ MEDIA_URL }}css/gfx/icons/close-transparent.png" />
                                        </span>
                                    </div>
                                    <div class="box-content">
                                        <p class="half-line">
                                            <span class="content">
                                                Przekaż 1% na koło!
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-white.gif" />
                                            </span>
                                        </p>
                                        <hr />
                                        <p class="half-line">
                                            <span class="content">
                                                Informacje personalne na stronę główną
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-white.gif" />
                                            </span>
                                        </p>
                                        <hr />
                                        <p class="half-line">
                                            <span class="content">
                                                Lista projektów jesień/zima
                                            </span>
                                            <span class="icons">
                                                <img class="icon-show" alt="show" src="{{ MEDIA_URL }}css/gfx/icons/show-white.gif" />
                                            </span>
                                        </p>
                                    </div>
                                    <p class="size-icon"><img class="icon-size" alt="change-size" src="{{ MEDIA_URL }}css/gfx/icons/size-white.gif" /></p>
                                </div>
                            </div>
                        <!-- Środkowa kolumna KONIEC -->
                    </div>
                </div>
                <div id="page-container-3"  class="column">
                        <!-- Prawa kolumna START -->

                            <div class="box-shadow">
                                <div class="box">
                                    <div class="box-header">
                                        <span class="box-header-title">
                                            <img class="box-header-pointer" alt="pointer" src="{{ MEDIA_URL }}css/gfx/icons/point-transparent.png" />
                                            <span>Wiadomość od zarządu</span>
                                        </span>
                                        <span class="box-header-icons">
                                            <img class="box-header-minimize" alt="minimize" src="{{ MEDIA_URL }}css/gfx/icons/minimize-transparent.png" />
                                            <img class="box-header-close" alt="close" src="{{ MEDIA_URL }}css/gfx/icons/close-transparent.png" />
                                        </span>
                                    </div>
                                    <div class="box-content">
                                        <p class="quote">
                                            Aliquam ipsum sem, hendrerit vitae dapibus vel, fringilla sit amet dolor. Integer imperdiet consequat justo, eu vulputate leo laoreet sed. Praesent fringilla est vel mauris iaculis varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent dictum purus non nisl posuere ultrices. Pellentesque sit amet neque erat. Nunc sit amet leo a quam accumsan sollicitudin. Phasellus ut enim quis dolor ornare ullamcorper. Aliquam erat volutpat. Donec imperdiet condimentum felis, eget faucibus dui accumsan at. 
                                        </p>
                                        <hr />
                                        <p class="half-line-one">
                                            <span class="foto-small">
                                                <img alt="foto" src="{{ MEDIA_URL }}css/gfx/icons/no-foto-small.gif" />
                                            </span>
                                            <span class="content">
                                                <strong>Jan Nowacki</strong><br />
                                                <span class="color-gray">Ojciec Dyrektor</span>
                                            </span>
                                            <span class="date-right">21/08/2009, 16:04</span>
                                        </p>
                                    </div>
                                    <p class="size-icon"><img class="icon-size" alt="change-size" src="{{ MEDIA_URL }}css/gfx/icons/size-white.gif" /></p>
                                </div>
                            </div>



                        {% load projects_tags %}
                        {% widget_projects %}

                        {% load notes_tags %}
                        {% widget_notes %}
                        <!-- Prawa kolumna KONIEC -->
                </div>
{% endblock %}


{% block js-extra %}
        <!--
            ładowanie potrzebnych do wyświetlenia tej strony pluginów jQuery, wykonywane w base.html,
            context processor w widgetach zajmuje się decydowaniem które potrzebujemy
        -->
        {{ block.super }}

	<script type="text/javascript">
	$(function() {
		$(".column").sortable({
			connectWith: '.column',
			cursor: 'move',
			delay: 500,
			opacity: 0.6,
			handle: 'div.box-header',
			revert: true,
			tolerance: 'pointer', 
		});

		$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
			.find(".portlet-header")
				.addClass("ui-widget-header ui-corner-all")
				.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
				.end()
			.find(".portlet-content");

		$(".box-header .box-header-minimize").click(function() {
			$(this).parents(".box").find(".box-content").toggle();
			$(this).parents(".box").find(".size-icon").toggle();
		});
		
		$(".box-header-close").click(function() {
			$(this).parents(".box-shadow").animate({opacity: 0.5}, '3000').slideUp();
			// lub toggle();
		});
		
		//$(".column").disableSelection();
	});
	</script>
{% endblock %}
